<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {storeQryIndexList} from '@/api/cleaningOrder'
import {storeDetailsId} from '@/api/pagesShop/index'
import {useCustomStores} from '@/utils/hook'
const latitude = ref(39.909)
const longitude = ref(116.39742)
const markers = ref([])
const selectedShop = ref(null)

const mapIcon = ('../../static/img/map_icon.png')
const {ShopStore,} = useCustomStores()
// 获取当前位置
const getCurrentLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      latitude.value = res.latitude
      longitude.value = res.longitude
      storeQryIndexList({
        pageNum:1,
        pageSize:50,
        latitude:  latitude.value||null,
        longitude:longitude.value  || null,
      }).then(res=>{
        setMarkers(res)
      })
    },
    fail: (err) => {
      uni.showToast({
        title: '获取位置失败',
        icon: 'none'
      })
    }
  })
}

// 设置地图标记点
const setMarkers = (shops) => {
  markers.value = shops.map((shop, index) => ({
    id: index,
    latitude:Number( shop.location.split(',')[0]),
    longitude:Number(shop.location.split(',')[1]) ,
    iconPath: shop.logo || mapIcon,
    width: 30,
    height: 30,
    ...shop
    // callout: {
    //   content: shop.storeName,
    //   padding: 5,
    //   borderRadius: 4,
    //   display: 'ALWAYS'
    // }
  }))
}

// 点击标记
const onMarkerTap = (e) => {
  const marker = markers.value[e.detail.markerId]
  let index = markers.value.findIndex(el => el.id === e.detail.markerId)
  // console.log(index,  e.detail.markerId )
  selectedShop.value = markers.value[index]
  console.log( selectedShop.value,'marker')

}

// 选择店铺
const selectShop = () => {
  if (!selectedShop.value) return
  uni.navigateBack({
    delta: 1
  })
}
const goShopCooperation = (id,ids) =>{
  storeDetailsId(id).then(res=>{
    ShopStore.setShopInfo({
      ...res,
    })
    uni.navigateTo({
      url: '/pages/cleaningOrder/index?storeId='+ids
    })
  })
}
onLoad((options) => {
  // 获取当前位置
  getCurrentLocation()
  // 这里模拟数据，实际项目中应该从API获取
  const mockShops = [{
    storeId: 1,
    storeName: '深圳斯派莱尼洗护专店',
    logo: 'http://www.xvopen.com/xiaoV/img1/shop.png',
    address: '南山区·大学城·民企科技园',
    latitude: 22.54,
    longitude: 113.94,
    businessHours: '周一~周日 08:00-24:00',
    distance: '3.3km'
  }]


})
</script>

<template>
  <view class="map-container">
    <z-nav-bar id="nav" bgColor="#ffffff" type="transparentFixed" ></z-nav-bar>
    <map
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      @markertap="onMarkerTap"
    ></map>

    <view class="shop-info" v-if="selectedShop">
      <view class="shop-header">
        <text class="shop-name">{{selectedShop.storeFullName}}</text>
        <text class="shop-tag">店铺</text>
      </view>
      <view class="shop-address">{{selectedShop.storeLocation}}</view>
      <view class="shop-hours">
        <text>营业时间</text>
        <text>{{selectedShop.onlineStartTime}}-{{selectedShop.onlineEndTime}}</text>
      </view>
      <view class="shop-distance">与我的距离 {{selectedShop.distance.toFixed(3)}}km</view>
      <button class="select-btn" @tap="goShopCooperation(selectedShop.id,selectedShop.storeId)">选择</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;

  .map {
    width: 100%;
    height: 100%;
  }

  .shop-info {
    position: absolute;
    bottom: 32rpx;
    left: 24rpx;
    right: 24rpx;
    background: #fff;
    padding: 24rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

    .shop-header {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;

      .shop-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #222;
      }

      .shop-tag {
        margin-left: 12rpx;
        padding: 4rpx 12rpx;
        background: #0080FF;
        color: #fff;
        font-size: 24rpx;
        border-radius: 4rpx;
      }
    }

    .shop-address {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
    }

    .shop-hours {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 12rpx;
    }

    .shop-distance {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 24rpx;
    }

    .select-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: #2B3139;
      color: #fff;
      border-radius: 8rpx;
      font-size: 32rpx;
    }
  }
}
</style>
